<template>
  <div>
    <slot name="research"></slot>
    <el-table class="tableClass" :class='radioSelect ? "order" : ""' ref="elTable" :data="list" v-loading="tableLoading"
      v-bind="tableProps" @current-change="currentChange" @select="tableSelect" @row-click="rowClick"
      @expand-change="expandChange" @selection-change='selectionChange' @sort-change="sortChange">
      <el-table-column v-if="tableProps.selection && tableProps.selection.showSelection"
        v-bind="tableProps.selection.props" type="selection" :width="tableProps.indexColWidth || 55">
      </el-table-column>
      <el-table-column v-if="tableProps.expandable" type="expand">
        <template #default="scope">
          <slot name="expand-area" v-bind="{ row: scope.row, key: item.key, $index: scope.$index }">
            <span class="m-5">这是展开行插槽</span>
          </slot>
        </template>
      </el-table-column>
      <el-table-column fixed='left' v-if="tableProps.showIndexCol" type="index" label="No." :index="indexMethod"
        :width="tableProps.indexColWidth || 50">
      </el-table-column>
      <template v-for="(item, index) in columns">
        <el-table-column v-if="!item.hidden" :key="index" :show-overflow-tooltip='!item.hideTooltip'
          :label="item.title || item.key" :prop="item.key" v-bind="item">
          <!--##########这里可以根据key自定义列##########-->
          <template #default="scope">
            <slot name="content" v-bind="{ row: scope.row, key: item.key, $index: scope.$index }">
              <span>{{ scope.row[item.key] }}</span>
            </slot>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="!tableProps.hideOperations" :resizable="false" :width="tableProps.opsColWith || 100"
        fixed="right">
        <template #header>
          <slot name="operation-title">
            <span>操作</span>
          </slot>
        </template>
        <template #default="scope">
          <div class="flex-justify-content">
            <slot name="operation" v-bind="{ row: scope.row, $index: scope.$index }">
              <a href="#" class="text-primary" @click.prevent.stop="editItem(scope.row, scope.$index)">编辑</a>
              <a style="margin-left:5px;" href="#" class="text-danger"
                @click.prevent.stop="deleteItem(scope.row, scope.$index)">删除</a>
            </slot>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'z-table',
  props: {
    tableLoading: { type: Boolean, default: false },
    list: { type: Array, default: null },
    tableProps: {
      type: Object,
      default: {
        border: true,
        opsColWith: 80,
      },
    },
    // query: {
    //   type: Object,
    //   default: {
    //     size: 10,
    //     page: 1,
    //   },
    // },
    columns: { type: Array, default: null },
    radioSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },

  methods: {
    indexMethod(index) {
      // return index + 1 + (this.query.page - 1) * this.query.size
      return index + 1
    },
    currentChange(row) {
      this.$emit('current-change', row)
    },
    rowClick(row) {
      this.$emit('row-click', row)
    },
    tableSelect(selection, row) {
      this.$emit('tableSelect', selection, row)
    },
    editItem(r, i) {
      this.$emit('editItem', r, i)
    },
    deleteItem(r, i) {
      this.$emit('deleteItem', r, i)
    },
    expandChange(row, expandRowKeys) {
      this.$emit('expand-change', row, expandRowKeys)
    },
    selectionChange(val) {
      this.$emit('selection-change', val)
    },
    sortChange(val) {
      this.$emit('sort-change', val)
    },
  },
}
</script>

<style lang="scss">
.flex-justify-content {
  display: flex;
  justify-content: space-around;
}

.tableClass {

  :deep(.el-table__fixed .el-table__fixed-right) {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }

}


:deep(.order .el-table__header-wrapper .el-checkbox) {
  display: none;
}

:deep(.el-table__fixed) {
  height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式
  bottom: 5px; // 固定列默认设置了定位，    position: absolute;top: 0;left: 0;只需要再设置一下bottom的值，让固定列和父元素的底部出现距离即可
  position: absolute;
  top: 0;
  left: 0;
}
</style>
